<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>修德抄经堂</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="../bower_components/mui/dist/css/mui.min.css">
    <link rel="stylesheet" type="text/css" href="../css/base.css">
    <link rel="stylesheet" type="text/css" href="../css/full.css">
    <link rel="stylesheet" type="text/css" href="../css/a.css">
    <link rel="stylesheet" type="text/css" href="../css/read_jingjin.css">
</head>
<body>
    <div id="mcover" style="display:none;">
        <img src="../img/guide.png" />
    </div>
    <div class="page">
        <!--<header class="mui-bar mui-bar-nav title">-->
            <!--&lt;!&ndash;<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"><span>返回</span></a>&ndash;&gt;-->
            <!--<h1 class="mui-title">道德抄经堂</h1>-->
        <!--</header>-->
        <!-- <div class="content">
            <img src="../img/xz_bg.jpg" class="cover">
            <img src="" class="cover" id="read-img">
        </div> -->
        <div class="content">
            <div class="words_backgroud">
                <div class="yincang zuo" id='left_page'>
                    <img src="../img/benxin/next.png">
                </div>
                <div class="fojing_pic fojing_pic_position">
                    
                </div>
                <div class='yincang you' id="right_page">
                    <img src="../img/benxin/you.png">
                </div>
                <ul class="yincang btns">
                    <a href="jingjin_chaoxie.html" class="btn">
                        <li class="btn">
                            <img src="../img/benxin/write.png">
                            <p>抄写</p>
                        </li>
                    </a>
                    <li class="btn" id="fenxiang">
                        <img src="../img/benxin/fenxiang.png">
                        <p>分享</p>
                    </li>
                    <li class='btn' id="cancleCollection" style="z-index: 10000;">
                        <img src="../img/benxin/exit.png">
                        <p>退出</p>
                    </li>
                </ul>
                <!--<img src="../img/write/demo.png" class="cover">-->
            </div>
            <!--<img src="../img/write/demo.png" class="cover">-->
        </div>
        <div class="footer">
            <div id="read_detail" class="mui-progressbar cover">
                <span></span>
            </div>
        </div>
    </div>
</body>
<script src="../bower_components/mui/dist/js/mui.min.js"></script>
<script src="../bower_components/jquery/dist/jquery.js"></script>
<script src="../js/read.js"></script>
<script src="../js/common.js"></script>
<script>
    var fenxiang = $('#fenxiang');
    $('.content').on('click','#fenxiang',function () {
        $("#mcover").css("display","block");
    })
    $('.content').on('click','#cancleCollection',function () {
        location.href = 'http://bk-bbe.com/web/front/jingjin.html';
    })
    // fenxiang.click(function () {
    //     $("#mcover").css("display","block");
    // })
    $("#mcover").click(
            function(){
                $("#mcover").css("display","none");  // 点击弹出层，弹出层消失
            }
    )
    // $("#cancleCollection").click(function () {
    //     window.history.back();
    // })
</script>
<script>
    var x = getUrlParam('x');
    if (x == 'yiwancheng'){
        $('.btns').empty().append(' <li class="btn" id="fenxiang">\n' +
            '                        <img src="../img/benxin/fenxiang.png">\n' +
            '                        <p>分享</p>\n' +
            '                    </li>\n' +
            '                    <li class=\'btn\' id="cancleCollection" style="z-index: 10000;">\n' +
            '                        <img src="../img/benxin/exit.png">\n' +
            '                        <p>退出</p>\n' +
            '                    </li>');
        $('.btns li').css('left','66px');
        $('.btns li').css('margin-right','21px');
    }
</script>
<script>
    var userTranscriptionID = localStorage.getItem('userTranscriptionID');
    var vId = localStorage.getItem('versionId');
    var pageNumIndex=1;
    var copingPageNum=0;
    var totalPageNum = null;
    var startWordIndex=0;
    var end = false;
    var backgroundUrl = '../img/write/demo1.png';
    var fontColor = '#080808';
    function getPageWords(versionId, pageIndex, copyIndex){
        api = '/fe/transcript/sutra_edition/'+vId+'/pages/'+pageIndex;
        $('.fojing_pic').html('');
        $.ajax({
            url: api,
            type: 'GET',
            async: false,
            success: function(data) {
                data = data.data.chars;
                text = '';
                left = $('.border_left');
                if (data.length == 0) {
                    end = true;
                    return
                }
                a = '-webkit-backdrop-filter: drop-shadow('+fontColor+' 100px 0px);'
                a = a+'-moz-filter: drop-shadow('+fontColor+' 100px 0px);'
                a = a+'-webkit-filter: drop-shadow('+fontColor+' 100px 0px);'
                a = a+'-o-filter: drop-shadow('+fontColor+' 100px 0px);'
                a = a+'filter: drop-shadow('+fontColor+' 100px 0px);'
                a = a+'-ms-filter: drop-shadow('+fontColor+' 100px 0px);'
                for(var i = 0,len = data.length;i<len;i++) {
                    if (data[i].index < startWordIndex && pageIndex==copyIndex) {
                        // $('.fojing_pic').append('<div class="word-frmame"><img class="word-position" src="'+data[i].img_url+'"></div>');
                        $('.fojing_pic').append('<div class="icon word-frmame"><div class="icon word-position" style="'+a+'background: url('+ data[i].img_url +') no-repeat center;background-size: contain"></div></div>');
                    }else if (pageIndex<copyIndex) {
                        // $('.fojing_pic').append('<div class="word-frmame"><img class="word-position" src="'+data[i].img_url+'"></div>');
                        $('.fojing_pic').append('<div class="icon word-frmame"><div class="icon word-position" style="'+a+'background: url('+ data[i].img_url +') no-repeat center;background-size: contain"></div></div>');
                    }else {
                        // $('.fojing_pic').append('<div class="word-frmame show"><img class="word-position" src="'+data[i].img_url+'"></div>');
                        $('.fojing_pic').append('<div class="icon word-frmame " style="opacity: 0.3"><div class="icon word-position" style="-webkit-filter: drop-shadow('+fontColor+' 100px 0px);background: url('+ data[i].img_url +') no-repeat center;background-size: contain"></div></div>');
                    } 
                }
            },
        })
    }
    var tapNum = 0;
    ajax('/fe/transcript/user_transcription/'+userTranscriptionID+'/progress',null).then(
            function (data) {
                var data = data.data;
                startWordIndex = data.char_index;
                copingPageNum = data.page_num;
                totalPageNum = data.total_page_num;
                if(data.layout_config){
                    if (data.layout_config.material_url) {
                        backgroundUrl = data.layout_config.material_url;
                    }
                    img_url = 'url(' + backgroundUrl + ')';
                    $('.words_backgroud').css("background-image", img_url);
                    fontColor = data.layout_config.font_color;
                }
                getPageWords(vId, pageNumIndex, copingPageNum);
                
            }
        )
    $('.fojing_pic').on('tap', function(i){
        tapNum++
        if (tapNum % 2) {
            $('.yincang').show();
            $('.fojing_pic').removeClass('fojing_pic_position');
            $('.fojing_pic').addClass('fojing_pic_add_btn_position');
        }else {
            $('.yincang').hide();
            $('.fojing_pic').removeClass('fojing_pic_add_btn_position');
            $('.fojing_pic').addClass('fojing_pic_position');
        }
        
    })

    $('#left_page').on('tap', function(i){
        if (pageNumIndex > 0){
            pageNumIndex--;
        }
        $('.you').show();
        if (pageNumIndex <= 0) {
            $('.zuo').hide();
        }else {
            getPageWords(vId, pageNumIndex, copingPageNum);   
        }
    })
    $('#right_page').on('tap', function(i){
        if (!end) {
            pageNumIndex++;
        } 
        $('.zuo').show();
        if (pageNumIndex<=totalPageNum) {
            getPageWords(vId, pageNumIndex, copingPageNum);
        }else{
            pageNumIndex--;
            $('.you').hide();
        }
        
    })

</script>
</html>